<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
      <a-card :bordered="false" style="height: calc(100vh - 125px)">
        <a-form-model ref="form" :model="approveRecord" :rules="rules" slot="title">
          <a-row v-if="comment">
            <a-col :span="16" style="height: 10px; margin-right: 10px">
              <a-form-model-item prop="reason">
                <a-select
                  style="width: 100%"
                  show-search
                  :allowClear="true"
                  :value="approveRecord.reason"
                  placeholder="审核原因"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="fetching ? undefined : null"
                  @focus="handleFocus"
                  @search="handleSearch"
                  @change="handleChange"
                  @blur="handleBlur"
                >
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option v-for="(d, index) in reasonList" :key="index">
                    {{ d }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-space>
                <a-button type="danger" icon="close" @click="submitForm(false)"> 拒绝 </a-button>
                <a-button type="primary" icon="check" @click="submitForm(true)"> 通过 </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form-model>
        <a-comment v-if="comment" style="margin: 10px">
          <template slot="actions">
            <span key="comment-basic-like">
              <a-tooltip title="点赞">
                <a-icon type="like" />
              </a-tooltip>
              <span style="padding-left: '8px'; cursor: 'auto'">
                {{ comment.likeNumber }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="取消点赞">
                <a-icon type="dislike" />
              </a-tooltip>
            </span>
            <span key="comment-basic-message">
              <a-tooltip title="回复数">
                <a-icon type="message" />
              </a-tooltip>
              <span style="padding-left: '8px'; cursor: 'auto'">
                {{ comment.replyNumber }}
              </span>
            </span>
            <span key="comment-basic-reply-to">回复</span>
          </template>
          <a slot="author">{{ comment.userName }}</a>
          <a-avatar slot="avatar" :src="imageUrl + comment.avatar" alt="image" />
          <p slot="content">{{ comment.content }}</p>
          <a-tooltip slot="datetime" :title="comment.createTime">
            <span>{{ publishTime }}</span>
          </a-tooltip>
        </a-comment>
        <a-empty v-else />
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { listComment, approveComment } from '@/api/platform/comment'
import { getPost } from '@/api/platform/post'
import { listApproveConfig } from '@/api/platform/approveConfig'
import CommentApprove from './CommentApprove'
import moment from 'moment'
export default {
  name: 'CommentDetail',
  props: {
    commentId: {
      type: String,
      required: false
    },
    statusOptions: {
      type: Array,
      required: true
    },
    isChildOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      //图片链接
      imageUrl: process.env.VUE_APP_BASE_API,
      spinning: false,
      delayTime: 100,
      fetching: false,
      comment: undefined,
      approveRecord: {
        itemId: undefined,
        reason: undefined,
        type: undefined
      },
      reasonList: [],
      publishTime: undefined,
      rules: {
        reason: [{ required: true, message: '审核原因不能为空', trigger: 'blur' }]
      }
    }
  },

  watch: {
    commentId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.initData()
        } else {
          this.reset()
        }
      }
    }
  },
  created() {},
  methods: {
    ...CommentApprove.methods,
    submitForm(flag) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.approveRecord.itemId = this.commentId
          if (flag) {
            this.approveRecord.type = '0'
          } else {
            this.approveRecord.type = '1'
          }
          const saveForm = JSON.parse(JSON.stringify(this.approveRecord))
          approveComment(saveForm).then(response => {
            this.$message.success('审核成功', 3)
            this.$emit('getList')
          })
        }
      })
    },
    initData() {
      this.spinning = !this.spinning
      this.$refs.form.resetFields()
      this.comment = undefined
      listComment({ id: this.commentId }).then(response => {
        this.comment = response.data.rows[0]
        this.setPublishTime()
        this.spinning = !this.spinning
      })
    },
    setPublishTime() {
      const createTime = moment(this.comment.createTime)
      const now = moment()
      const duration = moment.duration(now.diff(createTime))
      const hours = duration.asHours()
      if (hours < 24) {
        this.publishTime = duration.hours() + '小时前'
      } else {
        this.publishTime = createTime.format('YYYY-MM-DD')
      }
      console.log(this.publishTime)
    },
    reset() {
      this.comment = undefined
      this.publishTime = undefined
      this.approveRecord = {
        itemId: undefined,
        reason: undefined,
        type: undefined
      }
    },

    handleBlur(value) {
      this.approveRecord.reason = value
    },
    handleChange(value) {
      this.approveRecord.reason = this.reasonList[value]
    },
    handleSearch(value) {
      this.approveRecord.reason = value
    },
    handleFocus() {
      let queryParam = {}
      getPost(this.comment.postId).then(response => {
        queryParam = {
          pageNum: 1,
          pageSize: 10,
          itemId: response.data.regionId,
          status: '0'
        }
      })
      this.fetching = !this.fetching
      listApproveConfig(queryParam).then(response => {
        console.log(response.data)
        const reason = response.data.rows[0]
        this.reasonList = reason.sentence.split(',')
        this.fetching = !this.fetching
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
